<!DOCTYPE html>
<html lang="en-US">
<head>
    <script type="text/javascript" src="jquery.js"></script>
	<meta charset="utf-8">
    <title>JQuery自定义动画练习</title>
    <style type="text/css">
  	   * {
  	    	margin: 0;
  			padding: 0;
  	   }
  	   .yellow{
			width: 100px;
			height: 40px;
  	   }
  	   .blue{
  	   		width: 300px;
  	   		height: 100px;
  	   		background-color: blue;
  	   		position: absolute;
  	   		left: 0;
  	   		top: 100px;
  	   }
  	   .red{
  	   		width: 100px;
  	   		height: 150px;
  	   		background-color: red;
  	   		margin-top: 200px;
  	   		position: absolute;
  	   		left: 0;
  	   		top: 150px;
  	   }
    </style>
</head>
<body>	
	<button class="yellow">开始动画</button>
	<div class="blue"></div>
	<div class="red"></div>
    <script type="text/javascript">
		$('.yellow').click(function(){
			$('.blue').delay(1000).animate({
				left:'100px',
				width:'200px',
				height:'100px',
				opacity:'0.5'
			}).delay(1000).animate({
				top:"150px",
				opacity:'1'
			}).delay(1000).animate({
				left:'0',
				opacity:'0.5'
			}).delay(1000).animate({
				top:'100px',
				width:'300px',
				height:'100px',
				opacity:'1'
			});
			$('.red').animate({
				left:'100px',
				width:'200px',
				height:'100px',
				opacity:'0.5'
			}).animate({
				top:"150px",
				opacity:'1'
			}).animate({
				left:'0',
				opacity:'0.5'
			}).animate({
				top:'100px',
				width:'100px',
				height:'150px',
				opacity:'1'
			});
		});
    </script>
</body>
</html>